<template>
  <div class="input-demo">
    <h3 class="title">基本</h3>
    <div>
      <p>input value: {{ value }}</p>
      <div>
        <input type="text" v-model="value" />
      </div>
      <p>textarea value: {{ value2 }}</p>
      <div>
        <textarea v-model="value2"></textarea>
      </div>
    </div>
    <h3 class="title">自动适用高度的输入框</h3>
    <div>
      <textarea v-autosize v-model="value3" rows="1" placeholder="请输入"></textarea>
      <textarea v-autosize v-model="value3" rows="3" placeholder="请输入"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: 'inputDemo',
  data () {
    return {
      value: null,
      value2: null,
      value3: null
    }
  }
}
</script>

<style lang="stylus" scoped>
.input-demo
  input, textarea
    &+input, &+textarea
      margin 0 0 5px 5px
</style>
